<template>
	<div v-if="dataInfo">
		<view class="wrap">
			<view class="title"> {{ dataInfo.title }} </view>

			<view class="wrap-author">
				<view class="one"> {{ dataInfo.publisher }} </view>

				<view class="two"> {{ $filters.timestampToYMD(dataInfo.releasedAt) }} </view>

				<view class="three"> {{ dataInfo.address }} </view>
			</view>

			<view class="wrap-content">
				<uParse :html="$filters.handleHTMLData(dataInfo.content)" />
			</view>
		</view>
	</div>
</template>

<script>
	import uParse from "@/components/uParse/uParse.vue";
	import { competitionDetailData } from "@/utils/api.js";
	export default {
		components: {
			uParse,
		},
		data() {
			return {
				impressionId: "",
				dataInfo: null,
			};
		},
		onLoad(options) {
			this.impressionId = options.id;
			this.getData();
		},
		methods: {
			/**
			 * 网络请求
			 */
			getData() {
				competitionDetailData(this.impressionId).then((res) => {
					this.dataInfo = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}
	.wrap {
		width: 100%;
		overflow: hidden;
		padding: 40rpx;
		box-sizing: border-box;

		.title {
			color: #333333;
			font-size: 44rpx;
			font-weight: bold;
			line-height: 60rpx;
		}

		.wrap-author {
			margin-top: 44rpx;
			width: 100%;
			display: flex;
			align-items: center;
			line-height: 1;

			.one {
				color: #576b95;
				font-size: 30rpx;
			}
			.two {
				margin-left: 24rpx;
				color: #b2b2b2;
				font-size: 30rpx;
			}
			.three {
				margin-left: 22rpx;
				color: #b2b2b2;
				font-size: 30rpx;
			}
		}
		.wrap-content {
			width: 100%;
			overflow: hidden;
			margin-top: 70rpx;
			color: #333333;
			font-size: 28rpx;
			line-height: 48rpx;
		}
	}
</style>
